import React, { useEffect, useState } from 'react'
import '../../../css/csy/context.css'
import Singular from './singular';
const Body = ({ List, getList }: any) => {
    const [isshow, setIsshow] = useState(false);
    // 在 useEffect 中处理更新逻辑
    useEffect(() => {
        if (List && List.path && List.path.endsWith('.mp4')) {
            setIsshow(true);
        } else {
            setIsshow(false);
        }
    }, [List]); // 依赖 List
    return (
        <>
            <div className='body'>
                {/* 判断是否是视频文件来显示内容 */}
                {isshow ? (
                    <div className='img1'>
                        <video src={List.path} className='video' controls></video>
                    </div>
                ) : (
                    <div className='img1'>
                        <img className='img' src={List.path} />
                    </div>
                )}
                <div className='text'>
                    <h2 className='title'>{List.text}</h2>
                    <p className='title'>{List.textarea}</p>
                </div>
            </div>
            <Singular getdata={getList} list={List}></Singular>
        </>
    )
}

export default Body;
